import React, { useEffect } from 'react'
import styles from './index.module.scss'
import {
    Table,
    Card,
    Breadcrumb,
    Form,
    Radio,
    Select,
    DatePicker,
    Button,
    Image,
    Space,
    Tag
} from 'antd'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { getArticles, getChannels } from '@/store/actions/article'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import img from '@/assets/error.png'
const STATUS = [
    { type: -1, text: '全部', color: 'red' },
    { type: 0, text: '草稿', color: 'red' },
    { type: 1, text: '待审核', color: 'yellow' },
    { type: 2, text: '审核通过', color: 'green' },
    { type: 3, text: '审核失败', color: 'gray' }
]
export default function Article() {
    const dispacth = useDispatch()
    const {
        channels,
        articles: { total_count, results, page, per_page }
    } = useSelector(state => state.article)
    //一进来发送请求获取文章列表
    useEffect(() => {
        //获取频道
        dispacth(getChannels())
        dispacth(getArticles())
    }, [dispacth])


    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            render({ type, images }) {
                if (type > 0) {
                    return <Image
                        src={images[0]}
                        fallback={img}
                        width={200}
                        height={120}

                    ></Image>
                } else {

                    return <Image
                        src={img}
                        width={200}
                        height={120}
                    ></Image>
                }

            }
        },
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render(status) {
                const { text, color } = STATUS.find(item => item.type === status)
                return <Tag color={color}> {text} </Tag >
            }
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (id) => {
                return (<Space>
                    <Button
                        type="primary"
                        shape="circle"
                        icon={<EditOutlined />}
                    ></Button>
                    <Button
                        type="primary"
                        shape="circle"
                        danger
                        icon={<DeleteOutlined />}
                    ></Button>
                </Space>)
            }
        },
    ]
    const onFinush = (values) => {
        const params = {}
        if (values.status !== -1) {
            params.status = values.status
        }
        if (values.channel_id !== undefined) {
            params.channel_id = values.channel_id
        }
        if (values.data !== undefined) {
            params.begin_pubdate = values.data[0].startOf('day').format('YY-MM-DD HH.mm.ss')
            params.end_pubdate = values.data[1].endOf('day').format('YY-MM-DD HH.mm.ss')
        }
        console.log(params);
        //根据传过去的数据重新发送请求获取文章列表 需要params参数
        dispacth(getArticles(params))
    }

    return (
        <div className={styles.root}>
            <Card title={
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <Link to='/home'>首页</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item >
                        内容管理
                    </Breadcrumb.Item>
                </Breadcrumb>
            }>
                <Form
                    initialValues={{ status: -1 }}
                    size='large'
                    onFinish={onFinush}
                >
                    <Form.Item label='状态' name='status'>
                        <Radio.Group >
                            {
                                STATUS.map((item) => (
                                    <Radio
                                        value={item.type}
                                        key={item.type}
                                    >
                                        {item.text}
                                    </Radio>
                                ))}
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label='频道' name='channel_id'>
                        <Select style={{ width: 200 }} placeholder='请选择频道' >
                            {
                                channels.map(item => (
                                    <Select.Option
                                        key={item.id}
                                        value={item.id}
                                    >
                                        {item.name}
                                    </Select.Option>
                                ))
                            }

                        </Select>
                    </Form.Item>
                    <Form.Item label='日期' name='data'>
                        <DatePicker.RangePicker ></DatePicker.RangePicker>
                    </Form.Item>
                    <Form.Item >
                        <Button type='primary' htmlType='submit' >筛选</Button>
                    </Form.Item>
                </Form>
            </Card>
            <Card
                title={`根据查询条件共查询到${total_count}结果`}
                style={{ marginTop: 10 }}>

                <Table
                    dataSource={results}
                    columns={columns}
                    rowKey='id'//需要的key
                    pagination={{
                        position: ['bottomCenter'],//分页的位置
                        total: total_count,//分页的总条数
                        current: page,//分页的当前页
                        pageSize: per_page,//分页的当前页条数
                        // 点击切换
                        onChange: function (page, pageSize) {
                            console.log(page);
                            console.log(pageSize);
                            dispacth(getArticles({
                                page: page,
                                per_page: pageSize
                            }))
                        }
                    }}
                />
            </Card>
        </div>
    )
}
